<template>
  <div class="ball-container" ref="ballContainner">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div 
        class="ball" 
        ref="ball"
        id="ball"
        v-show="ballFlagCal"
      >
        <div class="inner" ref="innerBall"></div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'drop-ball',
    data() {
      return {
        ballFlag: false
      }
    },
    computed: {
      // ballFlagCal() {
      //   if (this.$store.getters.getBottonRect.ballFlag) {
      //     /* eslint-disable */
      //     this.ballFlag = !this.ballFlag
      //     // console.log('1----' + this.ballFlag)
      //   }
      //     return this.ballFlag
      // }
      ballFlagCal() {
        this.ballFlag = this.$store.getters.getBottonRect.ballFlag ?true : false
        return this.ballFlag
      }
    },
    methods: {
      beforeEnter(el) {
        const addRect = this.$refs.ballContainner.getBoundingClientRect()
        const xBallInitial = addRect.left
        const yBallInitial = addRect.top
        // const xButton = this.$store.getters.getBottonRect.left - 32 - 12
        const xButton = this.$store.getters.getBottonRect.left - xBallInitial - 12
        // const yButton = -(window.innerHeight - this.$store.getters.getBottonRect.top - 22)
        const yButton = -(yBallInitial - this.$store.getters.getBottonRect.top)

        el.style.transform = `translate(0,${yButton}px)`
        const inner = this.$refs.innerBall
        inner.style.transform = `translate(${xButton}px, 0)`
      },
      enter(el, done) {
        /* eslint-disable no-unused-vars */
        el.offsetWidth
        // this._reflow = document.body.offsetHeight
        // 控制y轴动画
        el.style.transform = 'translate(0, 0)'
        // 控制x轴动画（线性）
        const inner = this.$refs.innerBall
        inner.style.transform = `translate(0, 0)`
        done()
        // el.addEventListener('transitionend', done)
      },
      afterEnter(el) {
        this.ballFlag = !this.ballFlag
        this.$store.commit('clearButtonRect')
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  .ball-container
    z-index: 1000
    .ball
      // position: fixed
      // left: 32px
      // bottom: 22px
      transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
      .inner
        width: 16px
        height: 16px
        border-radius: 50%
        background: $color-blue
        transition: all 0.4s linear
</style>
